<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>线上日志调试输出</title>
    <script src="jquery.js"></script>
    <script src="sockjs.min.js"></script>
    <script src="stomp.min.js"></script>

</head>
<body>

<h1>指定监听日志文件的日志 <span id="tip"></span></h1>
<button onclick="cleartxt()">清空</button>
<div id="filelog-container" style="height: 900px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
    <div></div>
</div>
</body>
<script>
    var stompClient = null;
    $(document).ready(function () {
        openSocket();
    });

    function getPort() {
        var host = location.host;
        console.log(host)
        return host;
    }

    function openSocket() {
        if (stompClient == null) {
            var herf = "http://" + getPort() + "/websocket?token=kl";
            console.log(herf);

            var socket = new SockJS(herf);
            stompClient = Stomp.over(socket);
            stompClient.connect({token: "kl"}, function (frame) {
                //alert("success");
                $("#tip").text("日志监听成功!")
                stompClient.subscribe('/topic/pullFileLogger', function (event) {
                    var content = event.body;
                    $("#filelog-container div").append(content).append("<br/>");
                    $("#filelog-container").scrollTop($("#filelog-container div").height() - $("#filelog-container").height());
                }, {
                    token: "kltoen"
                });
            });
        }
    }

    function closeSocket() {
        if (stompClient != null) {
            stompClient.disconnect();
            stompClient = null;
        }
    }

    function cleartxt() {
        $("#filelog-container div").html("");
    }

    function txt() {
        alert(1);
    }
</script>
</body>
</html>